<template>
  <div class="big-page">
    <page-header menu="SmartLogistics"></page-header>
    <div class="show-layout">
      <div class="pager pager-left" :class="{'hide': page === 1}">
        <i class="el-icon-arrow-left" @click="prev"></i>
      </div>
      <div class="column">
        <div class="column-row">
          <div class="search-wrapper" v-if="page===1">
            <span class="label">月份：</span>
            <el-date-picker
              v-model="chart1.month_date"
              type="month"
              placeholder="选择月份"
              @change="getBxChart"
            >
            </el-date-picker>
          </div>
          <div class="search-wrapper" v-if="page===2">
            <span class="label">年份：</span>
            <el-date-picker
              v-model="chart2.year_date"
              type="year"
              placeholder="选择年份"
              @change="bxTpoLyMonth"
            >
            </el-date-picker>
          </div>
          <div class="search-wrapper" v-if="page===3">
            <el-date-picker
              v-model="chart3.week_day"
              type="date"
              placeholder="选择周"
              @change="getBusDateChart"
            >
            </el-date-picker>
            <el-select v-model="chart3.form_to" placeholder="选择路线" @change="getBusDateChart">
              <el-option label="中关村校区-良乡校区" value="中关村校区-良乡校区"></el-option>
              <el-option label="良乡校区-中关村校区" value="良乡校区-中关村校区"></el-option>
              <el-option label="中关村校区-西山校区" value="中关村校区-西山校区"></el-option>
              <el-option label="西山校区->中关村校区" value="西山校区->中关村校区"></el-option>
              <el-option label="中关村校区-回龙观" value="中关村校区-回龙观"></el-option>
              <el-option label="回龙观-中关村校区" value="回龙观-中关村校区"></el-option>
              <el-option label="中关村校区-房山分校阎村" value="中关村校区-房山分校阎村"></el-option>
              <el-option label="房山分校阎村-中关村校区" value="房山分校阎村-中关村校区"></el-option>
              <el-option label="良乡校区-回龙观" value="良乡校区-回龙观"></el-option>
              <el-option label="回龙观-良乡校区" value="回龙观-良乡校区"></el-option>
            </el-select>
          </div>
          <div class="search-wrapper" v-if="page===4">
            <el-date-picker
              v-model="chart4.start_time"
              type="date"
              placeholder="选择开始时间"
              @change="getBusAllChart"
            >
            </el-date-picker>
            <el-date-picker
              v-model="chart4.end_time"
              type="date"
              placeholder="选择结束时间"
              @change="getBusAllChart"
            >
            </el-date-picker>
            <el-select size="mini" clearable v-model="chart4.scale" placeholder="选择满载率" @change="getBusAllChart">
              <el-option v-for="item in chart4.scales" :key="item.text" :label="item.text" :value="item.value"></el-option>
            </el-select>
            <el-select v-model="chart4.form_to" placeholder="选择路线" @change="getBusAllChart">
              <el-option label="中关村校区-良乡校区" value="中关村校区-良乡校区"></el-option>
              <el-option label="良乡校区-中关村校区" value="良乡校区-中关村校区"></el-option>
              <el-option label="中关村校区-西山校区" value="中关村校区-西山校区"></el-option>
              <el-option label="西山校区->中关村校区" value="西山校区->中关村校区"></el-option>
              <el-option label="中关村校区-回龙观" value="中关村校区-回龙观"></el-option>
              <el-option label="回龙观-中关村校区" value="回龙观-中关村校区"></el-option>
              <el-option label="中关村校区-房山分校阎村" value="中关村校区-房山分校阎村"></el-option>
              <el-option label="房山分校阎村-中关村校区" value="房山分校阎村-中关村校区"></el-option>
              <el-option label="良乡校区-回龙观" value="良乡校区-回龙观"></el-option>
              <el-option label="回龙观-良乡校区" value="回龙观-良乡校区"></el-option>
            </el-select>
          </div>
          <div class="search-wrapper" v-if="page===5"></div>
          <common-chart :chart-type="'bar'" size="big" :data="chart1" v-if="page===1"></common-chart>
          <common-chart :chart-type="'bar'" size="big" :data="chart2" v-if="page===2"></common-chart>
          <common-chart :chart-type="'bar'" size="big" :data="chart3" v-if="page===3"></common-chart>
          <common-chart :chart-type="'bar'" size="big" :data="chart4" v-if="page===4"></common-chart>
          <common-chart :chart-type="'pie'" size="big" :data="chart5" v-if="page===5"></common-chart>
        </div>
      </div>
      <div class="pager pager-right" :class="{'hide': page === 5}">
        <i class="el-icon-arrow-right" @click="next"></i>
      </div>
    </div>
  </div>
</template>

<script>
import PageHeader from '@/views/pages/components/PageHeader'
import CommonChart from '@/views/pages/components/CommonChart'
import portal from '@/api/portal'
export default {
  name: 'SmartLogistics',
  data () {
    return {
      page: 1,
      chart1: {
        name: '详情信息',
        routeName: 'DetailInformation',
        query: { page: 'SmartLogistics', id: '131' },
        month_date: this.$moment().format('YYYY-MM'),
        title: '中关村维修数据',
        xAxis: [],
        seriesData: [],
        label: {
          show: true,
          position: 'top'
        },
        legend: []
      },
      chart2: {
        name: '详情信息',
        routeName: 'DetailInformation',
        query: { page: 'SmartLogistics', id: '133' },
        year_date: this.$moment().format('YYYY'),
        title: '中关村2022年楼宇维修统计排行',
        xAxis: [],
        seriesData: [],
        legend: []
      },
      chart3: {
        name: '详情信息',
        routeName: 'DetailInformation',
        query: { page: 'SmartLogistics', id: '121' },
        week_day: this.$moment().format('YYYY-MM-DD'),
        form_to: '中关村校区-良乡校区',
        title: '班车预约统计',
        xAxis: [],
        seriesData: [],
        seriesName: '',
        legend: []
      },
      chart4: {
        name: '详情信息',
        routeName: 'DetailInformation',
        query: { page: 'SmartLogistics', id: '121' },
        start_time: this.$moment().subtract(1, 'day').format('YYYY-MM-DD'),
        end_time: this.$moment().subtract(1, 'day').format('YYYY-MM-DD'),
        form_to: '中关村校区-良乡校区',
        scale: 80,
        title: '班车时间段满载总数统计',
        xAxis: [],
        seriesData: [],
        seriesName: '',
        scales: [
          {
            text: '100%',
            value: 100
          },
          {
            text: '80%',
            value: 80
          },
          {
            text: '60%',
            value: 60
          },
          {
            text: '30%',
            value: 30
          }
        ],
        legend: []
      },
      chart5: {
        name: '详情信息',
        routeName: 'DetailInformation',
        query: { page: 'SmartLogistics', id: '132' },
        title: '2021年维修统计排行',
        series: [],
        tooltip: [],
        legend: []
      }
    }
  },
  components: {
    PageHeader,
    CommonChart
  },
  created () {
    this.init()
  },
  mounted () {
  },
  methods: {
    toFirst () {
      setTimeout(() => {
        this.page = 1
        this.init()
      })
    },
    toDetail () {
      this.$router.replace({ name: 'DetailInformation', query: { id: '1' } })
    },
    init () {
      if (this.page === 1) {
        this.getBxChart()
      } else if (this.page === 2) {
        this.bxTpoLyMonth()
      } else if (this.page === 3) {
        this.getBusDateChart()
      } else if (this.page === 4) {
        this.getBusAllChart()
      } else if (this.page === 5) {
        this.getBusDateChart5()
      }
    },
    prev () {
      const currentPage = this.page
      if (currentPage > 1) {
        this.page = null
        setTimeout(() => {
          this.page = currentPage - 1
          this.init()
        }, 200)
      }
    },
    next () {
      const page = this.page
      if (page < 5) {
        this.page = null
        setTimeout(() => {
          this.page = page + 1
          this.init()
        }, 200)
      }
    },
    async getBxChart () {
      const params = {
        month_date: this.chart1.month_date
      }
      const res = await portal.bxChartMonth(params)
      if (res.data) {
        const data = res.data
        this.chart1.title = '中关村维修数据'
        this.chart1.xAxis = [
          { data: ['土木', '电', '设备', '水', '房屋漏水', '卡机', '供暖'] }
        ]
        this.chart1.series = [{
          type: 'bar',
          barWidth: '40%',
          color: '#fff',
          label: {
            show: true,
            position: 'top',
            textStyle: { color: '#fff', fontSize: 14, fontStyle: 'oblique' }
          },
          data: [data.tmCount, data.dCount, data.sbCount, data.sCount, data.fwlsCount, data.kjCount, data.gnCount]
        }]
      }
    },
    async bxTpoLyMonth () {
      const params = {
        year_date: this.$moment(this.chart2.year_date).format('YYYY')
      }
      const res = await portal.bxTpoLyMonth(params)
      if (res.data) {
        const data = res.data
        this.chart2.xAxis = [
          { data: data.map(ele => ele.baoxiuAddress_name) }
        ]
        this.chart2.series = [{
          type: 'bar',
          barWidth: '40%',
          color: '#fff',
          label: {
            show: true,
            position: 'top',
            textStyle: { color: '#fff', fontSize: 14, fontStyle: 'oblique' }
          },
          data: data.map(ele => ele.bxcount)
        }]
      }
    },
    async getBusDateChart () {
      if (!this.chart3.week_day || !this.chart3.form_to) {
        return
      }
      const params = {
        week_day: this.$moment(this.chart3.week_day).format('YYYY-MM-DD'),
        form_to: this.chart3.form_to
      }
      const res = await portal.getBusDateChart(params)
      if (res.data) {
        const data = res.data
        this.chart3.legend = ['总人数', '学生', '教职工']
        this.chart3.xAxis = [
          { data: data.map(ele => ele.time) }
        ]
        this.chart3.titleOption = {
          textStyle: {
            color: '#fff',
            fontSize: 22,
            fontWeight: 400,
            top: 10
          }
        }
        this.chart3.series = [
          {
            name: '总人数',
            type: 'bar',
            barWidth: '20%',
            color: '#fff',
            label: {
              show: true,
              position: 'top',
              textStyle: { color: '#fff', fontSize: 14, fontStyle: 'oblique' }
            },
            data: data.map(ele => ele.total)
          },
          {
            name: '学生',
            type: 'bar',
            barWidth: '20%',
            color: '#fff',
            label: {
              show: true,
              position: 'top',
              textStyle: { color: '#fff', fontSize: 14, fontStyle: 'oblique' }
            },
            data: data.map(ele => ele.stu)
          },
          {
            name: '教职工',
            type: 'bar',
            barWidth: '20%',
            color: '#fff',
            label: {
              show: true,
              position: 'top',
              textStyle: { color: '#fff', fontSize: 14, fontStyle: 'oblique' }
            },
            data: data.map(ele => ele.tea)
          }
        ]
      }
    },
    async getBusAllChart () {
      if (!this.chart4.start_time || !this.chart4.end_time || !this.chart4.form_to || !this.chart4.scale) {
        return
      }
      const params = {
        start_time: this.$moment(this.chart4.start_time).format('YYYY-MM-DD'),
        end_time: this.$moment(this.chart4.end_time).format('YYYY-MM-DD'),
        form_to: this.chart4.form_to,
        scale: this.chart4.scale
      }
      const res = await portal.getBusAllChart(params)
      if (res.data) {
        const data = res.data
        this.chart4.y = 20
        this.chart4.ly = 60
        this.chart4.top = '20%'
        this.chart4.legend = ['满载数量']
        this.chart4.xAxis = [
          { data: data.map(ele => ele.origin_time) }
        ]
        this.chart4.titleOption = {
          textStyle: {
            color: '#fff',
            fontSize: 22,
            fontWeight: 400,
            top: 20
          }
        }
        this.chart4.series = [
          {
            name: '满载数量',
            type: 'bar',
            barWidth: '20%',
            color: '#fff',
            label: {
              show: true,
              position: 'top',
              textStyle: { color: '#fff', fontSize: 14, fontStyle: 'oblique' }
            },
            data: data.map(ele => ele.num)
          }
        ]
      }
    },
    getBusDateChart5 () {
      this.page = -1
      setTimeout(() => {
        this.page = 5
        this.chart5.title = '2021年维修统计排行'
        this.chart5.legend = ['水', '电', '土木', '设备', '房屋漏水', '卡机', '供暖']
        this.chart5.series = [
          {
            name: '维修类别',
            type: 'pie',
            radius: '55%',
            tooltip: {
              trigger: 'item',
              formatter: '{b}:{c}\n({d}%)'
            },
            label: {
              show: true,
              textStyle: { color: '#fff', fontSize: 20 },
              formatter: '{b}:{c}\n({d}%)'
            },
            data: [{ value: 120, name: '水', itemStyle: { color: '#FF8955' } }, { value: 200, name: '电', itemStyle: { color: '#FFD200' } },
              { value: 150, name: '土木', itemStyle: { color: '#EB811A' } }, { value: 70, name: '设备', itemStyle: { color: '#FF5454' } },
              { value: 80, name: '房屋漏水', itemStyle: { color: '#0120EB' } }, { value: 110, name: '卡机', itemStyle: { color: '#4AB243' } },
              { value: 130, name: '供暖', itemStyle: { color: '#326A9D' } }]
          }
        ]
      }, 200)
    }
  }
}
</script>

<style scoped lang="scss">
.big-page {
  :deep(.el-input) {
    background-color: rgba(255, 255, 255, 0);
    .el-input__inner {
      background-color: rgba(255, 255, 255, 0);
      border-color: rgba(255, 255, 255, 0);
      color: #fff;
    }
  }
  .el-date-editor.el-input, .el-date-editor.el-input__inner {
    width: 150px;
  }
}

</style>
